<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>点缓冲区分析</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    let poiArray = [];
    let polygonBufferAnalysis;
    var editCircle;
    let circleBufferAnalysis;
    var isOpenEdit = false;

    window.app = new GE.App('mapContainer', {
        position: [120.170646, 30.28362, 2000], //相机的位置
        lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        useCarpet: true,
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });

    initPoi();
    btn()

    function btn() {
        let button1 = new GE.Button('开启点编辑', function () {
            openEditPoint();
        });
        app.ui.add(button1);


        let button2 = new GE.Button('关闭点编辑', function () {
            closeEditPoint();
        });
        app.ui.add(button2);
    }

    function openEditPoint() {
        if (isOpenEdit && circleBufferAnalysis) {
            alert('已经开启点缓冲分析');
            return;
        }

        if(editCircle){
            return;
        }
        
        editCircle = new GE.EditCircle();
        var finishClickListener = function (circle) { //结束点击事件。 circle表示圆的mesh
            circleBufferAnalysis = new GE.CircleBufferAnalysis({
                circle: circle, //圆的mesh
                objects: poiArray, //参与缓冲区分析的对象数组
                bufferDistance: 50, //缓冲区分析向外扩展的距离
            });
            var bufferFilter = circleBufferAnalysis.bufferAnalysis();  //缓冲区分析，返回的是一个数组，数组中的元素是布尔值，true表示该对象在缓冲区内，false表示该对象在缓冲区外
           
            for (let i = 0; i < bufferFilter.length; i++) {
                let isContain = bufferFilter[i];
                poiArray[i].visible = isContain;
            }
        }

        var circleData = {circleColor: '#00FA9A', circleOpacity: 0.7};
        editCircle.openEdit(circleData, finishClickListener);
        isOpenEdit = true;
    }

    function closeEditPoint() {
        editCircle.closeEdit();
        editCircle = null;
        circleBufferAnalysis.clear();
        circleBufferAnalysis = null;
        isOpenEdit = false;

        poiArray.forEach(element => {
            element.visible = true;
        });
    }

    function initPoi() {
        let MAX = 10;//点数量
        let left = 13376500;
        let right = 13378500;
        let Bottom = 3539500;
        let up = 3541000;
        let xStep = (right - left) / MAX;
        let yStep = (up - Bottom) / MAX;
        let lng;
        let lat;
        let object;
        let count = 0;
        for (let y = 0; y < MAX; y++) {
            for (let x = 0; x < MAX; x++) {
                lng = left + xStep * x;
                lat = Bottom + yStep * y;
                let point = new GE.Point(lng, lat, 40, '3857');
                object = { key: count, value: { minX: point.x, minY: point.y, maxX: point.x, maxY: point.y } };

                let poi = new GE.Poi({
                    url: 'http://192.168.2.100:8702/resources/1b8b2fcb26b020120aebfac57779e06a/images/tower.png', //模型图片路径
                    position: new GE.Point((object.value.minX + object.value.maxX) / 2, (object.value.minY + object.value.maxY) / 2, 40, '3857'),
                    name: object.key, //显示的文字名称
                    size: 300, //文字大小
                    isBold: false, //是否加粗
                    baseImageSize: 800, //图片大小（长宽一致，都是这个值）
                    showText: true,//是否显示文字
                    backGroundStyle: "#000000", //字体背景色
                    textStyle: '#ffffff',//字体颜色
                    textfont: 'sans-serif',//字体格式 字体的支持情况跟操作系统和浏览器环境有关，sans-serif是默认字体都支持，其余字体不保证正常显示
                })
                app.add(poi);
                poiArray.push(poi);

                count++;
            };
        }
    }
</script>

</html>